// 引入Three.js库的全部功能，并将其命名为THREE
import * as THREE from 'three';
// 引入交互控制器
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';

// 创建一个场景
const scene = new THREE.Scene();

// 创建一个透视相机，参数分别为视野角度、视口宽高比、近端距离、远端距离
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 创建一个WebGL渲染器
const renderer = new THREE.WebGLRenderer();

// 设置渲染器的大小为窗口的宽度和高度
renderer.setSize(window.innerWidth, window.innerHeight);

// 将渲染器的canvas元素添加到HTML文档中的body标签中
document.body.appendChild(renderer.domElement);


//------------- 下面是创建多面体的代码 -----------------------
// 定义多面体的顶点坐标
const vertices = [
    -1, -1, -1, 1, -1, -1, 1, 1, -1,
    -1, 1, -1, -1, -1, 1, 1, -1, 1,
    1, 1, 1, -1, 1, 1
];

// 定义多面体的面，表示顶点索引
const indices = [
    0, 1, 2, 3, 4, 5, 6, 7,
    8, 9, 10, 11, 12, 13, 14, 15, 16, 17
];

// 定义多面体的半径
const radius = 1;

// 创建多面体的几何体
const geometry = new THREE.PolyhedronGeometry(vertices, indices, radius, 0);
// 创建多面体的基础材质，可以设置颜色、纹理等属性
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
// 用几何体和材质创建 Mesh 对象
const polyhedron = new THREE.Mesh(geometry, material);

// 将 Mesh 对象添加到场景
scene.add(polyhedron);

//--------------- 创建多面体的代码结束 --------------------------


camera.position.z = 10;

const controls = new OrbitControls(camera, renderer.domElement);

// 创建一个动画函数
function animate() {
    // 请求下一帧动画
    requestAnimationFrame(animate);

    // 更新 OrbitControls
    controls.update();

    // 渲染场景
    renderer.render(scene, camera);
}

// 调用animate函数开始渲染循环
animate();


